<template>
	<div class="reset">
		<a-col :span="24">
			<div class="reset_passwold">
				<span>重置密码</span>
				<span class="back_login" @click="onBackLogin">返回登录</span>
			</div>
			<a-divider></a-divider>
		</a-col>
		<a-col :span="24">
			<div class="reset_form">
				<a-form ref="formLogin" :form="form" :model="form" :layout="layout">
					<a-form-item has-feedback >
						<span>登陆手机号</span>
            <a-input
              size="large"
              v-decorator="['mobile']"
              type="text"
              style="width: 70%;margin-left: 16px;"
              placeholder="请输入登录手机号">
            </a-input>
					</a-form-item>

          <a-form-item has-feedback>
            <span>密码</span>
            <a-input size="large" style="width: 70%;margin-left: 16px" :type="passwordType"  v-decorator="['password']" placeholder="请输入新密码" />
          </a-form-item>


          <a-form-item has-feedback>
            <span>确认新密码</span>
            <a-input size="large" style="width: 70%;margin-left: 16px" :type="passwordType"  v-decorator="['newPassword']" placeholder="请输入新密码" />
          </a-form-item>

          <a-form-item>
            <span>验证码</span>
            <a-input size="large" v-decorator="['inputCode']" placeholder="请输入验证码" style="width: 42%;margin-left: 16px;" />
            <span class="reset_send" @click="getCaptcha" >{{timeText}}</span>
          </a-form-item>

          <a-button
            type="primary"
            htmlType="submit"
            class="reset-button"
            :loading="resetBtn"
            @click.stop.prevent="handleSubmit"
            :disabled="resetBtn">确定
          </a-button>
				</a-form>


			</div>
		</a-col>
	</div>
</template>

<script>
import {mixinDevice} from '@/utils/mixin.js'
import {getSmsCaptcha} from '@/api/login'
import {getAction, postAction} from '@/api/manage'
import {checkOnlyUser} from '@/api/api'

	export default {
    mixins: [mixinDevice],
    data() {
      return {
        layout: 'horizontal',
        form: this.$form.createForm(this),
        timeText:"获取验证码",
        state: {
          time: 60,
          enterButton: false,
          passwordLevel: 0,
          passwordLevelChecked: false,
          percent: 10,
          progressColor: '#FF0000'
        },
        resetBtn: false,
        tipMsg: '',
        disabledFlag: false,
        passwordType: 'password',
        enterStyle:'width:130px;height:40px;color: #28B7B9;'
      }
    },

		methods: {

      changePassward() {
        this.passwordType = this.passwordType==='password'?'text':'password';
      },
      handlePasswordLevel( value) {

        let level = 0
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
        if (!reg.test(value)) {

          return "F1";
        }
        // 判断这个字符串中有没有数字
        if (/[0-9]/.test(value)) {
          level++
        }
        // 判断字符串中有没有字母
        if (/[a-zA-Z]/.test(value)) {
          level++
        }
        // 判断字符串中有没有特殊符号
        if (/[^0-9a-zA-Z_]/.test(value)) {
          level++
        }
        this.state.passwordLevel = level
        this.state.percent = level * 30
        if (level >= 2) {
          if (level >= 3) {
            this.state.percent = 100
          }
        } else {
          if (level === 0) {
            this.state.percent = 10
          }

          return "F2";
        }
      },

      handlePasswordInputClick() {
        if (!this.isMobile()) {
          this.state.passwordLevelChecked = true
          return;
        }
        this.state.passwordLevelChecked = false
      },

      handleSubmit() {

        var password = this.form.getFieldValue('password');
        var mobile =  this.form.getFieldValue('mobile');
        var inputCode = this.form.getFieldValue('inputCode');

        var newPassword = this.form.getFieldValue('newPassword');

        if(!mobile){

          this.$message.error({content:'提示：请正确输入您的手机号',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;
        }

        if(!inputCode){

          this.$message.error({content:'提示：请输入验证码',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;
        }


        if(!password){
          this.$message.error({content:'提示：请输入新的密码',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;

        }

        if(!(password.length>5&&password.length<21)){
          this.$message.error({content:'提示：请输入6-20位密码',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;
        }

        if(password!=newPassword){
          this.$message.error({content:'提示：密码不一致',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;
        }
        // var returnVal = this.handlePasswordLevel(password);
        // if(returnVal =="F1"){
        //      this.$message.error({content:'提示：密码由8位数字、大小写字母和特殊符号组成',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
        //      return;
        // }
        // if(returnVal=="F2"){

        //     this.$message.error({content:'提示：密码强度不够',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
        //     return;
        // }


        this.form.validateFields((err, values) => {
          if (!err) {
            var findpwd = {
              username: '',
              password:values.password,
              smscode: values.inputCode,
              phone: values.mobile

            };
            getAction("/sys/user/passwordChange2", findpwd).then((res) => {
              if (!res.success) {
                this.findPwdFailed(res.message);
              } else {
                this.$emit("goback",true)
                // this.$router.push({name: 'findPwdResult', params: {...values}});
              }
            })
          }
        })
      },

      getCaptcha(e) {

        var mobile =  this.form.getFieldValue('mobile');
        if(!mobile){
          this.$message.error({content:'提示：手机号不能为空',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});
          return;
        }


        getAction("/assess/yxUser/queryByphone", {'phone':mobile}).then((res) => {

          if (!res.success) {
            this.$message.error({content:'提示：'+err.message,icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>})
          }else{

            if(res.result>0){


              let that = this
              this.form.validateFields(['mobile'], {force: true}, (err, values) => {
                  if (!err) {
                    this.state.enterButton = true;
                    let interval = window.setInterval(() => {
                      if (that.state.time-- <= 0) {
                        that.state.time = 60;
                        that.state.enterButton = false;
                        window.clearInterval(interval);
                        that.timeText="获取验证码";
                        this.disabledFlag = false;
                        this.enterStyle = 'width:130px;height:40px;color: #28B7B9;';
                      }else{
                        that.timeText=that.state.time+"s后重新发送";
                        this.disabledFlag = true;
                        this.enterStyle = 'width:130px;height:40px;color: #B8BECC;';
                      }
                    }, 1000);
                    const hide = this.$message.loading('验证码发送中..', 0);
                    const params = {
                      mobile: values.mobile,
                      smsmode: "2"
                    };
                    postAction("/sys/sms", params).then((res) => {
                      if (!res.success) {
                        this.findPwdFailed(res.message);
                        setTimeout(hide, 0);
                      }
                      setTimeout(hide, 500);
                    }).catch(err => {
                      setTimeout(hide, 1);
                      clearInterval(interval);
                      that.state.time = 60;
                      that.state.enterButton = false;
                      this.requestFailed(err);
                    });
                  }
                }
              );


            }else{

              this.$message.error({content:'提示：手机号暂未注册葆龄健康，请先注册',icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>})
            }
          }

        }).catch(err => {

          this.$message.error({content:'提示：'+err.message,icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});

        });


      },
      findPwdFailed(message) {


        this.$message.error({content:"提示："+message,icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});

      },
      requestFailed(err) {

        this.$message.error({content:"提示："+ ((err.response || {}).data || {}).message || "请求出现错误，请稍后再试",icon:<a-icon type="exclamation-circle" theme="filled" style="color: red"/>});

        this.registerBtn = false;
      },
			onBackLogin(){
				this.$emit("goback",true)
			}

		},

	}
</script>

<style scoped lang="less">
	.reset {
		padding: 40px 40px 0 40px;

		.ant-divider-horizontal {
			margin: 14px 0 39px 0;
		}

		.reset_passwold {
			display: flex;
			justify-content: space-between;
			border-left: 4px solid #27B2B0;
			border-radius: 2px;
			padding-left: 5px;
			font-size: 18px;
			color: #333;
			height: 20px;
			line-height: 20px;

			.back_login {
				font-size: 14px;
				color: #27B2B0;
				&:hover{
					cursor:pointer;
				}
			}
		}

		.reset_form {
			span {
				display: inline-block;
				width: 88px;
				min-width: 88px;
				text-align: right;
				color: #333;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}

			.ant-form-item {
				margin-bottom: 20px;
			}

			.reset_send {
				border: 1px solid #27B2B0;
				color: #27B2B0;
				font-size: 14px;
				width: 110px;
				height: 32px;
				line-height: 32px;
				border-radius: 2px;
				margin-left: 16px;
				text-align: center;
				&:hover{
					cursor:pointer;
				}
			}
		}

		.ant-form-item {
			margin-bottom: 0;
		}

		.ant-btn {
			width: 320px;
			height: 40px;
			color: #fff;
			background: #27B2B0;
			box-shadow: 0px 4px 8px 0px rgba(39, 178, 176, 0.24);
			border-radius: 2px;
			margin: 16px 76px 0 103px;
		}

		.ant-btn:hover,
		.ant-btn:focus {
			color: #fff;
			background: #27B2B0;
			border-color: #27B2B0;
		}
	}
</style>
